<template>
	<view class="clsp_center">
		<view class="clsp_header p-40 text-center"
			:style="{backgroundImage:`url(${$getImageUri('resource/image/shopapi/uniapp/bg-settlement.png')})`}">
			<view class="title m-b-10">{{$zhTran('可结算分润')}}</view>
			<view class="num">{{withdrawData.able_withdraw}}</view>
			<view class="flex row-center m-t-30">
				<view class="btn" @tap="toWithdraw">{{$zhTran('申请结算')}}</view>
			</view>
		</view>
		<view class="order-nav flex row-between m-t-20">
			<view class="box-item">
				<view class="title m-b-10">{{$zhTran('结算中分润')}}</view>
				<view class="num">{{withdrawData.audit_withdraw}}</view>
			</view>
			<view class="box-item">
				<view class="title m-b-10">{{$zhTran('已结算分润')}}</view>
				<view class="num">{{withdrawData.done_withdraw}}</view>
			</view>
		</view>
		<view class="tabs-swiper m-t-20">
			<u-tabs-swiper ref="tabs" :list="tabsList" :current="tabsIndex" :is-scroll="false"
				active-color="rgba(64, 115, 250, 1)" bar-width="60" :bold="false" @change="changeCurrentTab">
			</u-tabs-swiper>
		</view>
		<view class="activity-list">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无结算数据~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
					<view class="order-contain" v-if="currentTab['sign'] === tabItem['sign']">
						<view class="order p-20" v-for="item in tabsList[tabIndex].list" :key="item.id">
							<view class="sn m-b-20">{{$zhTran('申请编号')}}：{{item.sn}}</view>
							<u-divider half-width="100%" :use-slot="false"></u-divider>
							<view class="detail flex row-between m-t-20">
								<view>{{$zhTran('申请分润金额')}}：￥{{item.money}}</view>
								<view>{{$zhTran('申请时间')}}：{{item.create_time_desc}}</view>
							</view>
							<view class="detail m-t-20">{{$zhTran('收款类型')}}：{{item.type_desc}}</view>
							<view class="detail m-t-20" v-if="item.type >= 3">{{$zhTran('收款账户')}}：{{item.account}}
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>

		</view>
	</view>
</template>

<script>
	import {
		apiWithdrawLists
	} from "@/api/user";
	import {
		apiWithdrawGetConfig,
	} from "@/api/cloudshop";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				withdrawData: {
					able_withdraw: 0, //可提现
					audit_withdraw: 0, //可提现
					done_withdraw: 0, //可提现
				},
				tabsList: [{
					sign: 'audit',
					name: this.$zhTran('等待审核'),
					status: '1',
					count: '',
					list: [],
				}, {
					sign: 'pay',
					name: this.$zhTran('等待支付'),
					status: '2',
					count: '',
					list: [],
				}, {
					sign: 'done',
					name: this.$zhTran('结算完成'),
					status: '3',
					count: '',
					list: [],
				}],
				tabsIndex: '0',
				leaderInfo: [],
				clsp_id: ''
			}
		},
		computed: {
			currentTab() {
				return this.tabsList[this.tabsIndex] || {}
			},
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		methods: {
			changeCurrentTab(index) {
				this.tabsIndex = index
				this.refreshOrderData()
			},

			// 获取提现基础数据
			getWithdrawData() {
				apiWithdrawGetConfig({
					store_id: this.clsp_id,
				}).then(res => {
					this.withdrawData = this.$zhTran(res);
				})
			},
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				const sign = this.currentTab.sign
				apiWithdrawLists({
					status: this.currentTab.status,
					clsp_id: this.clsp_id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
					extend
				}) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					tab.list = this.$zhTran(tab.list)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			toWithdraw() {
				this.$Router.push({
					path: '/bundle2/pages/cloud_shop/profit/withdraw',
					query: {
						clsp_id: this.clsp_id,
					}
				})
			}
		},
		onLoad() {
			const {
				clsp_id
			} = this.$Route.query
			this.clsp_id = clsp_id
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.getWithdrawData();
			this.refreshOrderData()
		},
		onPullDownRefresh() {
			this.getWithdrawData().finally(() => {
				uni.stopPullDownRefresh();
			})
		},
	}
</script>

<style lang="scss">
	page {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.clsp_center {

		.clsp_header {
			width: 100%;
			border-radius: 10rpx;
			color: #fff;
			background-size: cover;

			.title {
				font-size: 26rpx;
			}

			.num {
				font-size: 72rpx;
				font-weight: bold;
			}

			.btn {
				background-color: rgba(30, 195, 250, 1);
				color: #fff;
				padding: 15rpx 30rpx;
				border-radius: 10rpx;
			}
		}

		.order-nav {

			.box-item {
				width: 49%;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				text-align: center;

				.title {
					font-size: 26rpx;
					color: rgba(128, 128, 128, 1);
				}

				.num {
					font-size: 36rpx;
					color: rgba(56, 56, 56, 1);
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}

		.tabs-swiper {
			border-radius: 10rpx;
			overflow: hidden;
		}

		.activity-list {
			flex: 1;
			min-height: 0;
		}

		.order {
			padding-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 5px;
			padding: 30rpx;
			background-color: #FFFFFF;

			.top-item {
				position: relative;

				.title {
					font-size: 28rpx;
				}

				.date {
					color: rgba(166, 166, 166, 1);
				}
			}

			.sn {
				color: rgba(56, 56, 56, 1);
				font-size: 26rpx;
			}

			.detail {
				color: rgba(166, 166, 166, 1);
				font-size: 24rpx;
			}

		}
	}
</style>